import React from 'react';
import Chart from 'bizcharts/lib/components/Chart';
import Line from 'bizcharts/lib/components/TypedGeom/Line';
import Point from 'bizcharts/lib/components/TypedGeom/Point';
import Axis from 'bizcharts/lib/components/Axis';
import Legend from 'bizcharts/lib/components/Legend';
import Tooltip from 'bizcharts/lib/components/Tooltip';
import * as bizUtil from 'bizcharts/lib/core';

bizUtil.setTheme('default');
const BaseLine = props => {
  const { data, cols, fieldNames, color } = props;
  return (
    <Chart
      padding={[50, 'auto', 'auto', 50]}
      height={400}
      data={data}
      scale={cols}
      forceFit
    >
      <Legend position={'bottom'} />
      <Axis name={fieldNames.label} />
      <Axis name={fieldNames.value} />
      <Tooltip enterable />
      <Line
        color={color}
        position={`${fieldNames.label}*${fieldNames.value}`}
        size={2}
      />
      <Point
        color={color}
        position={`${fieldNames.label}*${fieldNames.value}`}
        size={4}
        shape={'circle'}
        style={{
          stroke: '#fff',
          lineWidth: 1,
        }}
      />
    </Chart>
  );
};

export default BaseLine;
